<template lang="pug">
  .modal-dialog.modal__overwrite(role='document', v-show="show")
    .modal-content
      .modal-header
        h5.modal-title {{type ? '成功' : '失败'}}
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
      .modal-body
        h2 {{type ? '成功' : '失败'}}成功
        button.btn.btn-outline-primary.btn-sm 确定
</template>
<style lang="scss" scoped>
.modal__overwrite {
  width: 540px;
  .modal-body {
    text-align: center;
    h2 {
      margin-top: 100px;
      margin-bottom: 74px;
      font-size: 18px;
      color: #bbb;
    }
    button {
      width: 140px;
      margin-bottom: 50px;
    }
  }
}
</style>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: mapState({
    show: state => state.modal.alert,
    type: state => state.bridge.alert.type
  }),
  methods: {
    close () {
      this.$store.commit('hide', 'alert')
    }
  }
}
</script>
